<template>
  <div class="BodyTemp" :class="_systemConfig.theme">
    <div class="BodyTemp_Menu">
      <vb-menu></vb-menu>
    </div>
    <div class="BodyTemp_Right">
      <div class="BodyTemp_Right_TopBar">
        <div class="BodyTemp_Right_TopBar_Tab">
          <vb-tab></vb-tab>
        </div>
        <div class="BodyTemp_Right_TopBar_Other">
          <el-tooltip class="item" effect="dark" content="使用手册" placement="bottom" v-if="_userInfo.isSuperRole">
            <a href="https://www.yuque.com/rly5dg/thyzgp" target="_blank"><div class="BodyTemp_Right_TopBar_Other_icon vbl vbl-shiyongshuoming1"></div></a>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="全屏" placement="bottom">
            <div class="BodyTemp_Right_TopBar_Other_icon vbl" :class="isfullscreen?'vbl-tuichuquanping':'vbl-tubiaozhizuomoban-'" v-on:click="setScreenFull()"></div>
          </el-tooltip>
<!--          <el-tooltip class="item" effect="dark" content="主题" placement="bottom">-->
<!--            <div class="BodyTemp_Right_TopBar_Other_icon el-icon-shopping-bag-2" v-on:click="$refs.styleDialog.open()"></div>-->
<!--          </el-tooltip>-->
<!--          <el-tooltip class="item" effect="dark" content="锁定" placement="bottom">-->
<!--            <div class="BodyTemp_Right_TopBar_Other_icon el-icon-lock"></div>-->
<!--          </el-tooltip>-->
<!--          <el-tooltip class="item" effect="dark" content="检索" placement="bottom">-->
<!--            <div class="BodyTemp_Right_TopBar_Other_icon el-icon-search"></div>-->
<!--          </el-tooltip>-->
<!--          <el-tooltip class="item" effect="dark" content="消息" placement="bottom">-->
<!--            <div class="BodyTemp_Right_TopBar_Other_icon el-icon-bell"></div>-->
<!--          </el-tooltip>-->
          <div class="BodyTemp_Right_TopBar_Other_user">
            <div class="user" v-on:click="showUserPanel=!showUserPanel;$event.stopPropagation()">
              <div class="user_img">
                <img v-if="_userInfo.avatarUrl" :src="_userInfo.avatarUrl" />
                <img v-else src="../../vBase/img/avatar.png" />
              </div>
              <div class="user_name">{{_userInfo.nickName}}</div>
              <div class="user_arrow el-icon-caret-bottom"></div>
            </div>
            <div class="menu" v-if="showUserPanel && _userInfo">
              <div class="menu_avatar">
                <img v-if="_userInfo.avatarUrl" :src="_userInfo.avatarUrl" />
                <img v-else src="../../vBase/img/avatar.png" />
              </div>
              <div class="menu_name">{{_userInfo.nickName}}</div>
              <div class="menu_tel" v-if="_userInfo.mobile">{{_userInfo.mobile}}</div>
              <div class="menu_list">
                <div class="menu_list_li" v-on:click="$routeUrl('/selfInfo')">
                  <div class="menu_list_li_icon vbl vbl-profile"></div>
                  <div class="menu_list_li_label">个人信息</div>
                </div>
                <div class="menu_list_li" v-on:click="$routeUrl('/updatePassword')">
                  <div class="menu_list_li_icon vbl vbl-mima"></div>
                  <div class="menu_list_li_label">修改密码</div>
                </div>
                <div class="menu_list_li" v-on:click="logout()">
                  <div class="menu_list_li_icon vbl vbl-tuichu"></div>
                  <div class="menu_list_li_label">退出系统</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="BodyTemp_Right_Center">
        <router-view v-if="isRouterAlive"></router-view>
      </div>
    </div>
    <StyleDialog ref="styleDialog"/>
  </div>
</template>

<script>
import $ from 'jquery';
import StyleDialog from "../../vBase/view/components/dialog/StyleDialog.vue"
import screenfull from 'screenfull'

export default {
  mixins: [],
  components: {
    StyleDialog
  },
  data() {
    return {
      show: false,
      isRouterAlive: true,
      isfullscreen: false,
      showUserPanel: false
    }
  },
  provide () {
    return {
      reload: this.reload,
    }
  },
  setup() {
  },
  computed: {
  },
  mounted() {
    let self = this
    setTimeout(function () {
      self.show = true
    }, 2000)
    $(document).click(() => {
      self.showUserPanel = false
    })
    self.initScreen()
  },
  methods: {
    /**
     * 全屏事件
     */
    initScreen() {
      if (screenfull.enabled) {
        screenfull.on('change', this.changeScreen)
      }
      window.onresize = () => {
        this.changeScreen()
      }
    },
    setScreenFull() {
      screenfull.toggle()
      this.isfullscreen = !this.isfullscreen
    },
    changeScreen() {
      this.isfullscreen = !!this.isFullScreenCheck()
    },
    isFullScreenCheck () {
      var explorer = window.navigator.userAgent.toLowerCase();
      if(explorer.indexOf('chrome')>0){//webkit
        if (document.body.scrollHeight === window.screen.height && document.body.scrollWidth === window.screen.width) {
          return true
        } else {
          return false
        }
      }else{//IE 9+  fireFox
        if (window.outerHeight === window.screen.height && window.outerWidth === window.screen.width) {
          return true
        } else {
          return false
        }
      }
    },

    /**
     * 页面重载
     **/
    reload(){
      this.isRouterAlive = false
      this.$nextTick(function () {
        this.isRouterAlive = true
      })
    },
  },
  watch: {
  }
}
</script>

<style lang="scss" scoped>
.BodyTemp{
  width: 100%;
  height: 100vh;
  display: flex;
  .BodyTemp_Right{
    flex: 1;
    overflow: hidden;
    .BodyTemp_Right_TopBar{
      width: 100%;
      height: 40px;
      display: flex;
      box-sizing: border-box;
      background: #fff;
      border-bottom: 1px solid var(--border-bc);
      .BodyTemp_Right_TopBar_Tab{
        flex: 1;
        width: 0;
      }
      .BodyTemp_Right_TopBar_Other{
        display: flex;
        align-items: center;
        a{
          text-decoration: none;
        }
        .BodyTemp_Right_TopBar_Other_icon,
        .BodyTemp_Right_TopBar_Other_user{
          width: 40px;
          height: 40px;
          font-size: 18px;
          text-align: center;
          line-height: 40px;
          font-weight: bold;
          cursor: pointer;
          &:hover {
            color: var(--primary);
          }
        };
        .BodyTemp_Right_TopBar_Other_user{
          width: auto !important;
          padding: 0 10px;
          position: relative;
          .user{
            display: flex;
            align-items: center;
            color: var(--font-ha);
            .user_img{
              display: flex;
              align-items: center;
              img{
                width: 20px;
                height: 20px;
                border-radius: 50%;
                object-fit: cover;
              }
            }
            .user_name{
              padding: 0 10px;
              font-size: 12px;
              font-weight: 400;
              display: flex;
              align-items: center;
            }
            .user_arrow{
              font-size: 12px;
              color: var(--font-hd);
            }
          }
          .menu{
            width: 200px;
            box-shadow: 0 0 8px 2px #cccccc;
            border-radius: 3px;
            position: absolute;
            top: 50px;
            right: 10px;
            background: #fff;
            z-index: 9999;
            color: var(--font-ha);
            .menu_avatar{
              width: 60px;
              height: 60px;
              border-radius: 100px;
              margin: 15px auto;
              img{
                width: 100%;
                height: 100%;
                border-radius: 50%;
                object-fit: cover;
              }
            }
            .menu_name{
              width: 100%;
              font-size: 14px;
              font-weight: 400;
              line-height: 20px;
            }
            .menu_tel{
              font-size: 12px;
              font-weight: 400;
              line-height: 20px;
            }
            .menu_list{
              margin-top: 20px;
              border-top: 1px solid var(--border-bd);
              .menu_list_li{
                display: flex;
                font-size: 12px;
                font-weight: 400;
                padding: 8px 15px;
                line-height: 20px;
                &:hover{
                  background: var(--bg-page);
                }
                .menu_list_li_icon{
                  font-size: 18px;
                  margin-right: 5px;
                  font-weight: bold;
                }
                .menu_list_li_label{}
              }
            }
          }
        }
      }
    }
    .BodyTemp_Right_Center{
      width: calc(100% - 40px);
      height: calc(100vh - 40px);
      padding: 0px 20px 0 20px;
      background: #fff;
      :deep(.ChildPage){
        &.formPanel{
          width: 600px;
          margin: 0px auto;
          padding-top: 30px;
          .formPanel_title{
            display: flex;
            align-items: center;
            .formPanel_title_label{
              border-left: 3px solid var(--primary);
              flex: 1;
              font-size: 16px;
              padding-left: 17px;
            }
            .formPanel_title_btn{}
          }
          .formPanel_center{
            padding-top: 20px;
            padding-left: 20px;
            .el-input input{
              background: var(--bg-page) !important;
              border: 0;
              padding-right: 0;
            }
            .el-input-group--append .el-input__inner, .el-input-group__prepend{
              border: 0;
            }
            &.row{
              .el-form-item__label,
              .el-form-item__content{
                width: 100% !important;
                margin: 0 !important;
              }
            }
          }
        }
      }
    }
  }
}
</style>
